<template>
  <div>
    <!-- 头部 -->
      <van-search
              v-model="value"
              label="沙滩"
              placeholder="请输入搜索商品的关键字"
              @focus="onFocus"
             
            >
      </van-search>
        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item  v-for="item in bannerList" :key="item.id">
            <img :src="item.image_url" alt="">
          </van-swipe-item>
        </van-swipe>

        <!-- 菜单 -->
        <van-grid :column-num="channel.length">
          <van-grid-item :icon="item.icon_url" :text="item.name"  v-for="item in channel " :key="item.id" @click="main(item)" />
        </van-grid>
        <!-- 品牌制造商直供 -->
        <div class="brand">
            <div class="head" @click="headlist(page)">品牌制造商直供</div>
            <div class="brandList">
                  <div class="brandBox" v-for="item in brandList" :key="item.id" @click="Introduction(item)">
                        <img :src="item.pic_url" alt="">
                        <p class="name">{{item.name}}</p>
                        <p class="floor_price">{{item.floor_price}}元起</p>
                  </div>                
            </div>
        </div>

        <!-- 新品首发 -->
        <div class="newgoods">
                <div class="newgoods-top" @click="newgoods">
                        <p class="newgoods-title">新品首发</p>
                        <p class="newgoods-info">查看全部</p>
                </div>
                
                <ul class="newgoods-bottom">
                 
                  <li v-for="item in newGoods" :key="item.id">
                     <router-link :to="`/goodsinfo?id=${item.id}`">
                        <img :src="item.list_pic_url" alt="">
                        <p class="newgoods-bottom-title">{{item.name}}</p>
                        <p class="newgoods-bottom-title2">{{item.goods_brief}}</p>
                        <p class="newgoods-bottom-title3">￥{{item.retail_price}}</p>
                  </router-link>
                  </li>   
                </ul>
        </div>

        <!-- 人气推荐 -->
        <div class="hotgoods">
              <div class="hotgoods-top" @click="ishot">
                    <p class="hotgoods-title">人气推荐     好物精选</p>
                    <p class="hotgoods-info">查看详情</p>
              </div>
              <ul class="hotgoods-bottom">
                <li v-for="item in hotGoods" :key="item.id">
                  <router-link :to="`/goodsinfo?id=${item.id}`">
                  <img :src="item.list_pic_url" alt="">
                  <p class="hotgoods-title1">{{item.name}}</p>
                  <p class="hotgoods-title2 ">{{ item.goods_brief}}</p>
                  <p class="hotgoods-title3"> ￥{{item.retail_price}}</p>
                </router-link>
                </li>
              </ul>
        </div>

        <!-- 专题精选 -->
        <div class="topicList">
              <div class="topicList-top">专题精选</div>
              <ul class="topicList-bottom">
                <li v-for="item in topicList" :key="item.id">
                  <router-link :to="`/topiclist?id=${item.id}`">
                  <img :src="item.item_pic_url" alt="">
                  <div class="topicList-bottom-box">
                    <span class="topicList-bottom-title1">{{item.title}}</span>
                    <span class="topicList-bottom-title2">{{item.price_info}}元起</span>
                  </div>
                  <p class="topicList-bottom-title3">{{item.subtitle}}</p>
                  </router-link>
                </li>
              </ul>
        </div>
        <div class="newcategory">
            <div class="list" v-for="item in newCategoryList" :key="item.id">
                <div class="head">{{item.name}}好物</div>
                <div class="sublist">
                      <div class="sublist-box" v-for="info in item.goodsList" :key="info.id">
                        <router-link :to="`/goodsinfo?id=${info.id}`">
                          <img :src="info.list_pic_url" alt="">
                          <p class="sublist-title1">{{info.name}}</p>
                          <p class="sublist-title2">￥{{info.retail_price}}</p>
                          </router-link>
                      </div>
                      <div class="sublist-icon">
                              <p class="sublist-icon-title">{{item.name}}好物</p>
                              <img src="../../../images/icon_go_more.png" alt="">
                      </div>
                </div>
            </div>
        </div>

  </div>
</template>

<script>
import { listaction } from "../../api/Home/index.js"
  export default {
      data() {
            return {
              value:"",
              page:1,
              bannerList:[],
              channel:[],
              brandList:[],
              newGoods:[],
              hotGoods:[],
              topicList:[],
              newCategoryList:[],
              

            }
      },
      methods: {
            // 搜索框获取焦点的时候触发
            onFocus(event){
                this.$router.push({path:"/serach"})
            },
            Introduction(item){
              // console.log(item);
              this.$router.push({name:"Introduction",params:{listinfo:item}})
            },
            main(item){
                    this.$router.push({name:"categoryinfo",query:{item}})
            },
            headlist(page){
              
                this.$router.push({name:"headList",query:{page:this.page}})
            },
            newgoods(){
              this.$router.push({name:"newgoods",query:{info:{isHot:'',isNew:"1"}}})
            },
            ishot(){
              this.$router.push({name:"newgoods",query:{info:{isHot:"1",isNew:""}}})
            }
        
      },
      created(){
          listaction().then(res=>{
            // console.log(res);
           this.bannerList = res.banner
           this.channel = res.channel
           this.brandList = res.brandList
           this.newGoods = res.newGoods
           this.hotGoods =res.hotGoods
           this.topicList = res.topicList
           this.newCategoryList = res.newCategoryList
          })
      }
    
  }
</script>

<style lang="scss" scoped>
// * {
//   border: 1px solid red ;
// }
* {
  padding: 0;
  margin: 0;
}
.van-field__control {
  background-color: #fff;
}
.van-search {
  height: 1.066667rem;
  background-color: #f4f4f4;
}

   .NavSearch {
    width: 100%;
    .city {
        width: 36px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        text-align: center;
        line-height: 36px;
        
    }
  }
    .my-swipe .van-swipe-item {
        img{
          width: 100%;
          height: 100%;
        }

    
  }

  .brand {
    width:100%;
    margin-top: 0.213333rem;
    // background-color: red;
   
      .head{
        width: 100%;
        font-size: 12px;
        text-align: center;
         padding: 20px;
        box-sizing: border-box;
        background-color:#fff;
        overflow: hidden;
      }
      .brandList {
        width: 100%;
        height: 7rem;
        display: flex;
        justify-content: space-around;
        align-content: space-around;
        flex-wrap: wrap;
        background-color: #fff;
        box-sizing: border-box;
      
      }
      .brandBox {
          width: 48%;
          height: 3.146667rem;
          padding: 0.08rem;
          border-radius: 8px;
          overflow: hidden;
          position: relative;
          border-radius: 8px;
          img{
            width: 100%;
            height: 100%;
          }
          .name {
            position: absolute;
            top: 0.4rem;
            left: 0.133333rem;
            font-size: 0.32rem;
          }
          .floor_price {
                position: absolute;
                top: 0.933333rem;
                left: 0.133333rem;
                 font-size: 0.373333rem;
          }
      } 
  }
  .newgoods {
    width: 10rem;
    height: 10.346667rem;
    // background-color: red;
    .newgoods-top {
      width: 100%;
      height: 3.253333rem;
      margin-top: 0.4rem;
      background:url("../../../images/bgnew.png");
      overflow: hidden;
      .newgoods-title {
        display: block;
        width: 2.4rem;
        color: #8c9bae;
        font-size: 0.426667rem;
        margin: 0 auto;
        margin-top: 0.8rem;
        text-align: center;
       
        }
         .newgoods-info {
          display: block;
          width: 2.4rem;
          height: 0.64rem;
          border: 0.026667rem solid #d8e4f0;
          margin: 0 auto;
          margin-top: 0.533333rem;
          text-align: center;
          line-height: 0.64rem;
          font-size: 0.373333rem;
          color: #8c9bae;
      }
    }
    .newgoods-bottom {
      width: 100%;
      height: 6.48rem;
      padding:  0 0.266667rem ;
      box-sizing: border-box;
      white-space: nowrap;
      overflow: auto;
      margin-top: 0.4rem;
      background-color: #fff;
   
      li {
          width: 3.73333rem;
          height: 5.54667rem;
          margin: 0.4rem 0.06667rem 0.33333rem;
          display: inline-block;
          box-sizing: border-box;
          img {
            width: 3.73333rem;
            height: 3.73333rem;
          }
  
          .newgoods-bottom-title {
            display: block;
            width: 94%;
            font-size: 0.4rem;
            font-weight: 700;
            margin: 0 auto;
            margin-left: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-top: 0.08rem;
            color:#333
          }
          .newgoods-bottom-title2 {
            display: block;
            width: 94%;
            color: #8a8a8a;
            font-size: 0.32rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-top: 0.133333rem;
             margin-left: 20px;

          }
          .newgoods-bottom-title3 {
            display: block;
            width: 94%;
            color:#9c3232 ;
            font-size: 0.32rem;
            margin-top: 0.133333rem;
            margin-left: 20px;
          }
      }
    }
  }
  .hotgoods {
    width: 100%;
    height:10.346667rem ;
    // background-color:red;
    .hotgoods-top {
        width: 100%;
        height: 130px;
        margin-top: 5px;
        background: url("../../../images/bgtopic.png");
        text-align: center;
        overflow: hidden;
        .hotgoods-title {
          margin-top: 0.9rem;
          color: #b1a279;
          font-size: 16px;
        }
        .hotgoods-info {
          width: 90px;
          height: 24px;
          color: #b1a279;
          line-height: 24px;
          margin: 0 auto;
          margin-top: 15px;
          border: 1px solid #b1a279;
          background-color: #f4e9cb;
        }
    }
    .hotgoods-bottom {
      width: 100%;
      height: 243px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: auto;
      margin-top: 5px;
      
      li {
        width: 140px;
        height: 230px;
         background-color: #fff;
        flex-shrink: 0;
        margin-left: 5px;
        img {
          width: 100%;
          height: 140px;
          // background-color: blue;
          
        }
         .hotgoods-title1 {
                  font-size: 16px;
                  font-weight: 700;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  text-indent: 1em;
                  margin-top: 3px;
                  color: #333;
          }
           .hotgoods-title2 {
             font-size: 14px;
             color: #8a8a8a;
             text-indent: 1em;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
             margin-top: 5px;
           }
            .hotgoods-title3 {
             font-size: 14px;
             color: #9c3232;
            text-indent: 1em;
             margin-top: 5px;

            
           }
      }
    }
  }
 .topicList {
   width: 100%;
   height: 305px;
   background-color: #fff;
   .topicList-top {
    width: 100%;
    padding: 0.48rem;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
   }
    .topicList-bottom {
      width: 100%;
      height: 250px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: auto;
      box-sizing: border-box;
     
      li {
        width: 288px;
        height: 250px;
        flex-shrink: 0;
        padding-right: 10px;
        margin-left: 10px;
        
        overflow: hidden;
        img {
          width: 287px;
          height: 162px;    
          border-radius: 10px;
          }
        .topicList-bottom-box {
            width: 100%;
            height: 30px;
            .topicList-bottom-title1 {
                  display: block;
                  width: 220px;
                  height: 100%;
                  font-size: 16px;
                  font-weight: 700;
                  float: left;
                  color: #333;
                 
            }
            .topicList-bottom-title2 {
                  width: 60px;
                  text-align: right;
                  color: #9c3232;
                  float: right;
              }
          
            }
         .topicList-bottom-title3 {
            color: #8a8a8a;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
             
        }
      }
    }
 }
 .newcategory {
   width: 100%;
  
   .list {
     width: 100%;
     height: 920px;
     padding: 5px;
     box-sizing: border-box;
      // background-color: red;
      .head {
       width: 100%;
       padding: 18px;
       text-align: center;
       font-size: 16px;
       box-sizing: border-box;
      }
      .sublist {
        width: 100%;
        height: 878px;
        display: flex;
        justify-content:space-between ;
        flex-wrap: wrap;
        box-sizing: border-box;
      
        .sublist-box {
          width: 180px;
          height: 215px;
          background-color: #fff;
          
          img {
            display: block;
            width: 151px;
            height: 151px;
            margin: 0 auto;
            // background-color: orange;
          }
          .sublist-title1 {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
            text-indent: 1em;
            color: #333;
          }
           .sublist-title2 {
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 12px;
              color: #9c3232;
              text-indent: 1em;
          }
        }
        .sublist-icon {
          width: 180px;
          height: 215px;
          background-color: #fff;
          .sublist-icon-title {
            display: block;
            width: 100%;
            height: 22px;
            font-size: 0.44rem;
            color: #333;
            text-align: center;
            margin-top: 60px;
          }
          img {
          display: block;
          width: 35px;
          height: 35px;
          margin: 0 auto;
          margin-top: 10px;
         
          }
        }
      }
   }
 }
</style>

